<template>
	<view class="add_main">
		<view class="form_main">
			<view class="form_item">
				<view class="title">*家长姓名</view>
				<input class="input input_view" type="text" v-model="dataForm.parent" />
			</view>
			<view class="form_item">
				<view class="title">*孩子姓名</view>
				<input class="input input_view" type="text" v-model="dataForm.name" />
			</view>
			<view class="form_item">
				<view class="title">*电话</view>
				<input class="input input_view" type="number" v-model="dataForm.phone" />
			</view>
			<view class="form_item">
				<view class="title">*所属班级</view>
				<input class="input input_view" v-model="dataForm.student_class" />
			</view>
			<view class="form_item">
				<view class="title">备注</view>
				<textarea class="input input_textarea" type="textarea" v-model="dataForm.remarks" />
			</view>
		</view>
		<view class="glo_bot_main">
			<view class="glo_bot_fix">
				<view class="glo_button" @click="startSubmit">
					立即报名
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isMobile
	} from '@/utils/validate.js';
	export default {
		props: {
			infoId: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				dataForm: {
					name: '',
					parent: '',
					phone: '',
					student_class: '',
					remarks: '',
				},

			};
		},

		methods: {
			startSubmit() {
				if (!this.dataForm.parent) {
					this.$toast({
						title: '请填写家长姓名'
					});
				} else if (!this.dataForm.name) {
					this.$toast({
						title: '请填写孩子姓名'
					});
				} else if (!this.dataForm.phone || !isMobile(this.dataForm.phone)) {
					this.$toast({
						title: '请填写正确的电话'
					});
				} else if (!this.dataForm.student_class) {
					this.$toast({
						title: '请填写孩子所属班级'
					});
				} else {
					uni.showModal({
						content: '确定提交报名信息？',
						success: (res) => {
							if (res.confirm) {
								this.sureSub()
							}
						}
					})
				}
			},
			sureSub() {
				this.$loading()
				this.$AddNewData('b_enroll_users', {
					...this.dataForm,
					fk_enroll_info_id: this.infoId,
					fk_users_id: this.vuex_user.pk_id
				}, {
					isWeb: true
				}).then(({
					data
				}) => {
					this.successSub()
				})
			},
			successSub() {
				this.$hide()
				uni.showToast({
					title: '报名成功',
					icon: 'none',
					complete: () => {
						setTimeout(() => {
							this.$emit('subFinsh')
						}, 1000);
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.add_main {
		background-color: $www-theme-bg;
	}

	.form_main {
		padding: 0 24rpx 1rpx;
		background-color: #fff;

		.title {
			font-weight: bold;
			padding: 30rpx 0;
		}

		.form_item {
			padding-bottom: 10rpx;

			.title {
				padding: 30rpx 0;
			}

			.input {
				border: 1px solid #dde5ed;
				border-radius: 6rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				margin-bottom: 10rpx;

				&.input_view {
					line-height: 68rpx;
					height: 68rpx;
				}

				&.input_textarea {
					width: 100%;
					padding: 10rpx 20rpx;
					line-height: 42rpx;
					height: 168rpx;
				}
			}
		}

		.pay_box {
			padding-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.sign {
		font-size: 26rpx;
	}
</style>
